<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="链接 let、const和globalThislet 只在块级作用域内起效 不存在变量提升 暂时性死区 不允许重复声明 块级作用域替代IIFE立即执行函数  不存在变量提升1234567// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet ba">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6总结">
<meta property="og:url" content="http://yoursite.com/2020/08/17/ES6总结/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="链接 let、const和globalThislet 只在块级作用域内起效 不存在变量提升 暂时性死区 不允许重复声明 块级作用域替代IIFE立即执行函数  不存在变量提升1234567// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet ba">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1ghel895idrj309k05i3yo.jpg">
<meta property="og:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1ghelkmlwaxj30a80340st.jpg">
<meta property="og:updated_time" content="2020-12-08T13:25:25.755Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ES6总结">
<meta name="twitter:description" content="链接 let、const和globalThislet 只在块级作用域内起效 不存在变量提升 暂时性死区 不允许重复声明 块级作用域替代IIFE立即执行函数  不存在变量提升1234567// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet ba">
<meta name="twitter:image" content="https://wx4.sinaimg.cn/mw690/0069qZtTgy1ghel895idrj309k05i3yo.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/08/17/ES6总结/">





  <title>ES6总结 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/08/17/ES6总结/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">ES6总结</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-08-17T18:50:17+08:00">
                2020-08-17
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  4,839
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  24
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><a href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener">链接</a></p>
<h1 id="let、const和globalThis"><a href="#let、const和globalThis" class="headerlink" title="let、const和globalThis"></a>let、const和globalThis</h1><h2 id="let"><a href="#let" class="headerlink" title="let"></a>let</h2><ul>
<li>只在块级作用域内起效</li>
<li>不存在变量提升</li>
<li>暂时性死区</li>
<li>不允许重复声明</li>
<li>块级作用域替代IIFE立即执行函数</li>
</ul>
<h3 id="不存在变量提升"><a href="#不存在变量提升" class="headerlink" title="不存在变量提升"></a>不存在变量提升</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">// var 的情况</span><br><span class="line">console.log(foo); // 输出undefined</span><br><span class="line">var foo = 2;</span><br><span class="line"></span><br><span class="line">// let 的情况</span><br><span class="line">console.log(bar); // 报错ReferenceError</span><br><span class="line">let bar = 2;</span><br></pre></td></tr></table></figure>
<h3 id="暂时性死区"><a href="#暂时性死区" class="headerlink" title="暂时性死区"></a>暂时性死区</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var tmp = 123;</span><br><span class="line"></span><br><span class="line">if (true) &#123;</span><br><span class="line">  tmp = &apos;abc&apos;; // ReferenceError</span><br><span class="line">  let tmp;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="不允许重复声明"><a href="#不允许重复声明" class="headerlink" title="不允许重复声明"></a>不允许重复声明</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// 报错</span><br><span class="line">function func() &#123;</span><br><span class="line">  let a = 10;</span><br><span class="line">  var a = 1;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 报错</span><br><span class="line">function func() &#123;</span><br><span class="line">  let a = 10;</span><br><span class="line">  let a = 1;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="块级作用域替代IIFE立即执行函数"><a href="#块级作用域替代IIFE立即执行函数" class="headerlink" title="块级作用域替代IIFE立即执行函数"></a>块级作用域替代IIFE立即执行函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">// IIFE 写法</span><br><span class="line">(function () &#123;</span><br><span class="line">  var tmp = ...;</span><br><span class="line">  ...</span><br><span class="line">&#125;());</span><br><span class="line"></span><br><span class="line">// 块级作用域写法</span><br><span class="line">&#123;</span><br><span class="line">  let tmp = ...;</span><br><span class="line">  ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="const"><a href="#const" class="headerlink" title="const"></a>const</h2><ul>
<li>只在块级作用域内起效</li>
<li>不存在变量提升</li>
<li>暂时性死区</li>
<li>不允许重复声明</li>
<li>不允许更改</li>
<li>不允许删除</li>
<li>初始化必须赋值</li>
</ul>
<p>const只能保证指向的指针是固定的。如果是数组，是可改的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">const arr = [];</span><br><span class="line">arr.push(&apos;hello&apos;); // [&apos;hello&apos;]</span><br><span class="line">arr.length = 0; // []</span><br><span class="line">arr = [&apos;world&apos;]; // 报错</span><br></pre></td></tr></table></figure>
<h2 id="globalThis"><a href="#globalThis" class="headerlink" title="globalThis"></a>globalThis</h2><table>
<thead>
<tr>
<th style="text-align:center">顶层对象</th>
<th style="text-align:center">浏览器</th>
<th style="text-align:center">Node</th>
<th style="text-align:center">Web Worker</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">window</td>
<td style="text-align:center">✓</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
</tr>
<tr>
<td style="text-align:center">self</td>
<td style="text-align:center">✓</td>
<td style="text-align:center">×</td>
<td style="text-align:center">✓</td>
</tr>
<tr>
<td style="text-align:center">global</td>
<td style="text-align:center">×</td>
<td style="text-align:center">×</td>
<td style="text-align:center">✓</td>
</tr>
<tr>
<td style="text-align:center">globalThis(ES2020)</td>
<td style="text-align:center">✓</td>
<td style="text-align:center">✓</td>
<td style="text-align:center">✓</td>
</tr>
</tbody>
</table>
<h2 id="常量变量"><a href="#常量变量" class="headerlink" title="常量变量"></a>常量变量</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const PI = 3.14</span><br></pre></td></tr></table></figure>
<h2 id="常量对象"><a href="#常量对象" class="headerlink" title="常量对象"></a>常量对象</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var OBJ = &#123;</span><br><span class="line">    name: &apos;姓名&apos;,</span><br><span class="line">    age: 12</span><br><span class="line">&#125;</span><br><span class="line">Object.freeze(OBJ);</span><br></pre></td></tr></table></figure>
<h1 id="变量的解构赋值"><a href="#变量的解构赋值" class="headerlink" title="变量的解构赋值"></a>变量的解构赋值</h1><h2 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h2><h3 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h3><p><strong>用法：只要等号两边的模式相同，左边的变量就会被赋予对应的值，解析失败返回undefined。（按次序）</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">let [x, , y] = [1, 2, 3];</span><br><span class="line">x // 1</span><br><span class="line">y // 3</span><br><span class="line"></span><br><span class="line">let [head, ...tail] = [1, 2, 3, 4];</span><br><span class="line">head // 1</span><br><span class="line">tail // [2, 3, 4]</span><br><span class="line"></span><br><span class="line">let [x, y, ...z] = [&apos;a&apos;];</span><br><span class="line">x // &quot;a&quot;</span><br><span class="line">y // undefined</span><br><span class="line">z // []</span><br></pre></td></tr></table></figure>
<h3 id="默认值"><a href="#默认值" class="headerlink" title="默认值"></a>默认值</h3><p><strong>默认值：数组成员严格等于===，默认值才生效</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">let [foo = true] = [];</span><br><span class="line">foo // true</span><br><span class="line"></span><br><span class="line">let [x, y = &apos;b&apos;] = [&apos;a&apos;]; // x=&apos;a&apos;, y=&apos;b&apos;</span><br><span class="line">let [x, y = &apos;b&apos;] = [&apos;a&apos;, undefined]; // x=&apos;a&apos;, y=&apos;b&apos;</span><br><span class="line">let [x = 1] = [null];</span><br><span class="line">x // null</span><br></pre></td></tr></table></figure>
<h1 id="ES6…扩展（spread）-收集（rest）运算符详解"><a href="#ES6…扩展（spread）-收集（rest）运算符详解" class="headerlink" title="ES6…扩展（spread）/收集（rest）运算符详解"></a>ES6<code>…</code>扩展（spread）/收集（rest）运算符详解</h1><h2 id="一、扩展运算符"><a href="#一、扩展运算符" class="headerlink" title="一、扩展运算符"></a>一、扩展运算符</h2><p>我理解的，用<code>()</code>包起来就是扩展成单个值，用<code>[]</code>包起来就是扩展成数组。</p>
<h3 id="1-代替apply"><a href="#1-代替apply" class="headerlink" title="1.代替apply"></a>1.代替apply</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var test = function(a,b,c)&#123;</span><br><span class="line">  console.log(a,b,c);</span><br><span class="line">&#125;</span><br><span class="line">var arr = [1,2,3];</span><br><span class="line">test(...arr); // 1 2 3</span><br></pre></td></tr></table></figure>
<p>用apply的写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">test.apply(null,arr);</span><br></pre></td></tr></table></figure>
<h3 id="2-代替concat"><a href="#2-代替concat" class="headerlink" title="2.代替concat"></a>2.代替concat</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr1 = [1,2,3,4];</span><br><span class="line">var arr2 = [0,...arr1,5,6];</span><br><span class="line">console.log(arr2); // [0, 1, 2, 3, 4, 5, 6]</span><br></pre></td></tr></table></figure>
<p>用concat的写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[0].concat(arr1,5,6); // [0, 1, 2, 3, 4, 5, 6]</span><br></pre></td></tr></table></figure>
<h3 id="3-代替split"><a href="#3-代替split" class="headerlink" title="3.代替split"></a>3.代替split</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str = &apos;hello&apos;;</span><br><span class="line">var arr3 = [...str];</span><br><span class="line">console.log(arr3); // [&quot;h&quot;, &quot;e&quot;, &quot;l&quot;, &quot;l&quot;, &quot;o&quot;]</span><br></pre></td></tr></table></figure>
<p>用split的写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&apos;hello&apos;.split(&apos;&apos;); // [&quot;h&quot;, &quot;e&quot;, &quot;l&quot;, &quot;l&quot;, &quot;o&quot;]</span><br></pre></td></tr></table></figure>
<h2 id="二、收集运算符"><a href="#二、收集运算符" class="headerlink" title="二、收集运算符"></a>二、收集运算符</h2><h3 id="1-接收不确定个数的形参"><a href="#1-接收不确定个数的形参" class="headerlink" title="1.接收不确定个数的形参"></a>1.接收不确定个数的形参</h3><p>此功能和<code>JAVA</code>一样，当形参传入个数不确定时可用在形参上。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var rest2 = function(item, ...arr)&#123;</span><br><span class="line">  console.log(item,arr);</span><br><span class="line">&#125;</span><br><span class="line">rest2(&apos;hello&apos;,2,3,3,4); // hello [2, 3, 3, 4]</span><br></pre></td></tr></table></figure>
<h3 id="2-配合解构时使用"><a href="#2-配合解构时使用" class="headerlink" title="2.配合解构时使用"></a>2.配合解构时使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var [a,...temp] = [1,2,3,4];</span><br><span class="line">console.log(a,temp); // 1 [2, 3, 4]</span><br></pre></td></tr></table></figure>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p><strong>使用：变量与属性同名即可取到值，解析失败返回undefined</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">let &#123; bar, foo &#125; = &#123; foo: &apos;aaa&apos;, bar: &apos;bbb&apos; &#125;;</span><br><span class="line">foo // &quot;aaa&quot;</span><br><span class="line">bar // &quot;bbb&quot;</span><br><span class="line"></span><br><span class="line">let &#123; baz &#125; = &#123; foo: &apos;aaa&apos;, bar: &apos;bbb&apos; &#125;;</span><br><span class="line">baz // undefined</span><br></pre></td></tr></table></figure>
<p>实际上<code>let { bar } = { bar: &#39;bbb&#39; };</code>是简写，全称是：<code>let { bar:bar } = { bar: &#39;bbb&#39; };</code>；</p>
<p>所以如果变量名与属性名不一致，必须写成全称：</p>
<p>（字义name变量接收对象里的title字段）<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">let &#123;title:name&#125; = &#123;title:&apos;小明&apos;,sex:&apos;男&apos;&#125;;</span><br><span class="line">title // 小明</span><br></pre></td></tr></table></figure></p>
<p>在解构中，<strong>左边是模式，右边是赋值</strong>。</p>
<h3 id="默认值-1"><a href="#默认值-1" class="headerlink" title="默认值"></a>默认值</h3><p><strong>默认值：对象属性严格等于===，默认值才生效</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">var &#123;x, y = 5&#125; = &#123;x: 1&#125;;</span><br><span class="line">x // 1</span><br><span class="line">y // 5</span><br><span class="line"></span><br><span class="line">var &#123;x: y = 3&#125; = &#123;&#125;;</span><br><span class="line">y // 3</span><br><span class="line"></span><br><span class="line">var &#123;x: y = 3&#125; = &#123;x: 5&#125;;</span><br><span class="line">y // 5</span><br></pre></td></tr></table></figure>
<p>假设想要的效果是这样的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var foo = function(x,y)&#123;</span><br><span class="line">    x = x || 10;</span><br><span class="line">    y = y || 20;</span><br><span class="line">    console.log(x+y);</span><br><span class="line">&#125;</span><br><span class="line">foo(1,2); // 3</span><br><span class="line">foo(); // 30</span><br></pre></td></tr></table></figure>
<p>但是也有出错的时候：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">foo(0,1); // 11</span><br></pre></td></tr></table></figure>
<p>第一个参数0被解析成了false，而不是数字0进行计算。</p>
<p>用<code>默认参数值</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var foo = function(x=10, y=20)&#123;</span><br><span class="line">    console.log(x+y);</span><br><span class="line">&#125;</span><br><span class="line">foo(0,1); // 1</span><br></pre></td></tr></table></figure>
<h3 id="注意点"><a href="#注意点" class="headerlink" title="注意点"></a>注意点</h3><p>（1）将一个已声明的变量解构时注意不要将{}放于行首，JavaScript会解析为代码块</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">// 错误的写法</span><br><span class="line">let x;</span><br><span class="line">&#123;x&#125; = &#123;x:1&#125;;</span><br><span class="line">// SyntaxError: syntax error</span><br><span class="line"></span><br><span class="line">// 正确的写法</span><br><span class="line">let x;</span><br><span class="line">(&#123;x&#125; = &#123;x:1&#125;);</span><br></pre></td></tr></table></figure>
<p>（2）解构允许等号左边不放置任何变量，但是无意义。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">(&#123;&#125; = &#123;x:1&#125;);</span><br></pre></td></tr></table></figure>
<p>（3）数组中模式为数字时，代表下标</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">let arr = [1, 2, 3];</span><br><span class="line">let &#123;0 : first, [arr.length - 1] : last&#125; = arr;</span><br><span class="line">first // 1</span><br><span class="line">last // 3</span><br></pre></td></tr></table></figure>
<h2 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h2><p>字符串直接转换为数组赋值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">const [a, b, c, d, e] = &apos;hello&apos;;</span><br><span class="line">a // &quot;h&quot;</span><br><span class="line">b // &quot;e&quot;</span><br><span class="line">c // &quot;l&quot;</span><br><span class="line">d // &quot;l&quot;</span><br><span class="line">e // &quot;o&quot;</span><br><span class="line">let &#123;length : len&#125; = &apos;hello&apos;;</span><br><span class="line">len // 5</span><br></pre></td></tr></table></figure>
<h2 id="数值和布尔值"><a href="#数值和布尔值" class="headerlink" title="数值和布尔值"></a>数值和布尔值</h2><p>如果等号右边是数值和布尔值，会转换成对象。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let &#123;toString: s&#125; = 123;</span><br><span class="line">s === Number.prototype.toString // true</span><br><span class="line"></span><br><span class="line">let &#123;toString: s&#125; = true;</span><br><span class="line">s === Boolean.prototype.toString // true</span><br></pre></td></tr></table></figure>
<h2 id="用途"><a href="#用途" class="headerlink" title="用途"></a>用途</h2><p>(1) 变换变量的值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let x = 1;</span><br><span class="line">let y = 2;</span><br><span class="line">[x,y] = [y,x];</span><br></pre></td></tr></table></figure>
<p>（2）提取对象的属性</p>
<p>（3）遍历Map</p>
<p>任何部署了 Iterator 接口的对象，都可以用for…of循环遍历</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">const map = new Map();</span><br><span class="line">map.set(&apos;first&apos;, &apos;hello&apos;);</span><br><span class="line">map.set(&apos;second&apos;, &apos;world&apos;);</span><br><span class="line"></span><br><span class="line">for (let [key, value] of map) &#123;</span><br><span class="line">  console.log(key + &quot; is &quot; + value);</span><br><span class="line">&#125;</span><br><span class="line">// first is hello</span><br><span class="line">// second is world</span><br></pre></td></tr></table></figure>
<p>（4）输入模块的指定方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">improt &#123;list1&#125; from &apos;list&apos;</span><br></pre></td></tr></table></figure>
<h2 id="对比表"><a href="#对比表" class="headerlink" title="对比表"></a>对比表</h2><table>
<thead>
<tr>
<th style="text-align:center">值</th>
<th style="text-align:center">用法</th>
<th style="text-align:center">括号</th>
<th style="text-align:center">默认值</th>
<th style="text-align:center">默认值生效条件</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">数组</td>
<td style="text-align:center"><code>let [a, b] = [1, 2];</code></td>
<td style="text-align:center">数组<code>[]</code></td>
<td style="text-align:center"><code>let [foo = true] = [];</code></td>
<td style="text-align:center">值为<code>undefined</code></td>
</tr>
<tr>
<td style="text-align:center">对象</td>
<td style="text-align:center"><code>let { foo } = { foo: &#39;aaa&#39;};</code></td>
<td style="text-align:center">对象<code>{}</code></td>
<td style="text-align:center"><code>let {foo} = {bar: &#39;baz&#39;};</code></td>
<td style="text-align:center">值为<code>undefined</code></td>
</tr>
<tr>
<td style="text-align:center">字符串</td>
<td style="text-align:center"><code>const [a, b, c] = &#39;hello&#39;;</code></td>
<td style="text-align:center">数组<code>[]</code></td>
<td style="text-align:center"><code>const [a,b = 5] = &#39;e&#39;</code></td>
<td style="text-align:center">值为<code>undefined</code></td>
</tr>
<tr>
<td style="text-align:center">数值（转对象、无意义）</td>
<td style="text-align:center"><code>let {toString: s} = 123;</code></td>
<td style="text-align:center">对象<code>{}</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">布尔（转对象、无意义）</td>
<td style="text-align:center"><code>let {toString: s} = true;</code></td>
<td style="text-align:center">对象<code>{}</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
</tbody>
</table>
<h1 id="字符串的扩展"><a href="#字符串的扩展" class="headerlink" title="字符串的扩展"></a>字符串的扩展</h1><p><a href="https://firefly1984982452.github.io/2020/06/05/js%20String%E5%AF%B9%E8%B1%A1/" target="_blank" rel="noopener">链接</a></p>
<iframe style="width:100%;height:900px;" src="https://firefly1984982452.github.io/2020/06/05/js%20String%E5%AF%B9%E8%B1%A1/"></iframe>

<h1 id="数值的扩展"><a href="#数值的扩展" class="headerlink" title="数值的扩展"></a>数值的扩展</h1><iframe style="width:100%;height:900px;" src="https://firefly1984982452.github.io/2020/06/05/js%20Math%E5%92%8CNumber/"></iframe>


<h1 id="函数的扩展"><a href="#函数的扩展" class="headerlink" title="函数的扩展"></a>函数的扩展</h1><h2 id="函数的默认参数"><a href="#函数的默认参数" class="headerlink" title="函数的默认参数"></a>函数的默认参数</h2><p>值为<code>undefined</code>时才生效</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function log(x, y = &apos;World&apos;) &#123;</span><br><span class="line">  console.log(x, y);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">log(&apos;Hello&apos;) // Hello World</span><br><span class="line">log(&apos;Hello&apos;, &apos;China&apos;) // Hello China</span><br><span class="line">log(&apos;Hello&apos;, &apos;&apos;) // Hello</span><br></pre></td></tr></table></figure>
<h3 id="与解构赋值默认值结合使用"><a href="#与解构赋值默认值结合使用" class="headerlink" title="与解构赋值默认值结合使用"></a>与解构赋值默认值结合使用</h3><p><strong>当不使用默认值时</strong>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function foo(&#123;x, y = 5&#125;) &#123;</span><br><span class="line">  console.log(x, y);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo(&#123;&#125;) // undefined 5</span><br><span class="line">foo(&#123;x: 1&#125;) // 1 5</span><br><span class="line">foo(&#123;x: 1, y: 2&#125;) // 1 2</span><br><span class="line">foo() // TypeError: Cannot read property &apos;x&apos; of undefined</span><br></pre></td></tr></table></figure>
<p>此时的x和y没有函数参数默认值，所以会报错。</p>
<p><strong>使用默认值时</strong>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function foo(&#123;x, y = 5&#125; = &#123;&#125;) &#123;</span><br><span class="line">  console.log(x, y);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">foo() // undefined 5</span><br></pre></td></tr></table></figure>
<h3 id="位置"><a href="#位置" class="headerlink" title="位置"></a>位置</h3><p>必须是尾参数，不然除非调用时显示写上undefined，如：<code>foo(undefined,1)</code>。</p>
<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p>只在function内部有效</p>
<h3 id="应用"><a href="#应用" class="headerlink" title="应用"></a>应用</h3><ul>
<li>如果省略某参数，函数仍然进行</li>
</ul>
<h2 id="reset参数"><a href="#reset参数" class="headerlink" title="reset参数"></a>reset参数</h2><h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><p>相当于将函数自带的arguments转换成了数组。</p>
<p>（reset参数的形式与java类似）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">function f1()&#123;</span><br><span class="line">    console.log(arguments)</span><br><span class="line">    console.log(Array.from(arguments))</span><br><span class="line">&#125;</span><br><span class="line">function f2(...values)&#123;</span><br><span class="line">    console.log(values)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">f1(3213,23,2,2332,32,);</span><br><span class="line">// Arguments(5) [3213, 23, 2, 2332, 32, callee: ƒ, Symbol(Symbol.iterator): ƒ]</span><br><span class="line">// (5) [3213, 23, 2, 2332, 32]</span><br><span class="line"></span><br><span class="line">f2(3213,23,2,2332,32,)</span><br><span class="line">// (5) [3213, 23, 2, 2332, 32]</span><br></pre></td></tr></table></figure>
<h3 id="位置-1"><a href="#位置-1" class="headerlink" title="位置"></a>位置</h3><p>必须是尾参数。</p>
<h2 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h2><p>作用：</p>
<ul>
<li>简化代码回调函数</li>
<li>提升this</li>
</ul>
<h3 id="使用-2"><a href="#使用-2" class="headerlink" title="使用"></a>使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">// 简写：</span><br><span class="line">data.map(val =&gt; val.id);</span><br><span class="line">// 全写：</span><br><span class="line">data.map((val) =&gt; &#123;</span><br><span class="line">  return val.id;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="与箭头函数结合"><a href="#与箭头函数结合" class="headerlink" title="与箭头函数结合"></a>与箭头函数结合</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function f1(...values)&#123;</span><br><span class="line">    return values;</span><br><span class="line">&#125;</span><br><span class="line">var f2 = (...values) =&gt; values;</span><br><span class="line"></span><br><span class="line">f1(1,2,3,4); // [1, 2, 3, 4]</span><br><span class="line">f2(1,2,3,4); // [1, 2, 3, 4]</span><br></pre></td></tr></table></figure>
<h2 id="尾调用优化"><a href="#尾调用优化" class="headerlink" title="尾调用优化"></a>尾调用优化</h2><h3 id="尾调用是什么"><a href="#尾调用是什么" class="headerlink" title="尾调用是什么"></a>尾调用是什么</h3><p><strong>某个函数的最后一步是调用另一个函数</strong></p>
<p>以下三种情况，都不属于尾调用：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// 情况一</span><br><span class="line">function f(x)&#123;</span><br><span class="line">  let y = g(x);</span><br><span class="line">  return y;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 情况二</span><br><span class="line">function f(x)&#123;</span><br><span class="line">  return g(x) + 1;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 情况三</span><br><span class="line">function f(x)&#123;</span><br><span class="line">  g(x);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>情况一：调用函数g之后，还有赋值操作；<br>情况二：调用函数g之后，还有<code>+1</code>的操作；<br>情况三：调用函数g之后，还隐式的调用了<code>return undefined</code>。</p>
<h3 id="尾调用优化-1"><a href="#尾调用优化-1" class="headerlink" title="尾调用优化"></a>尾调用优化</h3><p><strong>只保留内层函数的调用帧</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">function f() &#123;</span><br><span class="line">  let m = 1;</span><br><span class="line">  let n = 2;</span><br><span class="line">  return g(m + n);</span><br><span class="line">&#125;</span><br><span class="line">f();</span><br><span class="line"></span><br><span class="line">// 等同于</span><br><span class="line">function f() &#123;</span><br><span class="line">  return g(3);</span><br><span class="line">&#125;</span><br><span class="line">f();</span><br><span class="line"></span><br><span class="line">// 等同于</span><br><span class="line">g(3);</span><br></pre></td></tr></table></figure>
<h3 id="尾递归"><a href="#尾递归" class="headerlink" title="尾递归"></a>尾递归</h3><p><strong>尾调用自身</strong></p>
<p>例如将下面的普通递归改为尾递归</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function factorial(n) &#123;</span><br><span class="line">  if (n === 1) return 1;</span><br><span class="line">  return n * factorial(n - 1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">factorial(5) // 120</span><br></pre></td></tr></table></figure>
<p>此时需要保存n个记录，复杂度O(n)；</p>
<p>尾递归只保留一个调用记录，复杂度O(1)：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function factorial(n, total) &#123;</span><br><span class="line">  if (n === 1) return total;</span><br><span class="line">  return factorial(n - 1, n * total);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">factorial(5, 1) // 120</span><br></pre></td></tr></table></figure>
<h3 id="递归函数的改写"><a href="#递归函数的改写" class="headerlink" title="递归函数的改写"></a>递归函数的改写</h3><p><strong>柯里化</strong>：将多参数的函数转换成单参数的形式。（默认值正好可以用上）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">function factorial(n, total = 1) &#123;</span><br><span class="line">  if (n === 1) return total;</span><br><span class="line">  return factorial(n - 1, n * total);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">factorial(5) // 120</span><br></pre></td></tr></table></figure>
<h1 id="数组的扩展"><a href="#数组的扩展" class="headerlink" title="数组的扩展"></a>数组的扩展</h1><iframe style="width:100%;height:900px;" src="https://firefly1984982452.github.io/2020/06/08/JavaScript%E4%B9%8B%E6%95%B0%E7%BB%84/"></iframe>

<h1 id="对象-1"><a href="#对象-1" class="headerlink" title="对象"></a>对象</h1><iframe style="width:100%;height:900px;" src="https://firefly1984982452.github.io/2020/08/05/JavaScript%E4%B9%8B%E5%AF%B9%E8%B1%A1/"></iframe>

<h1 id="Symbol"><a href="#Symbol" class="headerlink" title="Symbol"></a>Symbol</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var a = Symbol(&apos;e&apos;)</span><br><span class="line">var b = Symbol(&apos;e&apos;)</span><br><span class="line">a == b //false</span><br><span class="line"></span><br><span class="line">var c = &apos;e&apos;</span><br><span class="line">var d = &apos;e&apos;</span><br><span class="line">c == d // true</span><br><span class="line">c === d // true</span><br></pre></td></tr></table></figure>
<p>可以看出，正常情况下，只要值一样，不管是<code>==</code>还是<code>===</code>，都是相等的，但是Symbol就能保证值的唯一性。</p>
<h1 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h1><p>为什么要用Map？因为普通数据结构无法以非字符串为键。</p>
<p>举例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var m = &#123;&#125;;</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m[x] = &apos;foo&apos;;</span><br><span class="line">m[y] = &apos;bar&apos;;</span><br><span class="line">console.log(m,m[x],m[y]); // &#123;[object Object]: &quot;bar&quot;&#125; &quot;bar&quot; &quot;bar&quot;</span><br></pre></td></tr></table></figure>
<p>对象<code>m</code>中只有一个<code>[object Object]</code>，值都是<code>&#39;bar&#39;</code>，它无法解析两个对象为键。</p>
<h2 id="使用Map以非字符串为键"><a href="#使用Map以非字符串为键" class="headerlink" title="使用Map以非字符串为键"></a>使用Map以非字符串为键</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var m = new Map();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x , &apos;foo&apos;);</span><br><span class="line">m.set(y , &apos;bar&apos;);</span><br><span class="line">console.log(m);</span><br><span class="line">console.log(m.get(x));</span><br><span class="line">console.log(m.get(y));</span><br><span class="line">console.log(m.get(&#123;id:1&#125;));</span><br></pre></td></tr></table></figure>
<p>结果：</p>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1ghel895idrj309k05i3yo.jpg" alt="image"></p>
<h2 id="delete删除"><a href="#delete删除" class="headerlink" title="delete删除"></a>delete删除</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">m.delete(y);</span><br></pre></td></tr></table></figure>
<h2 id="clean清除所有"><a href="#clean清除所有" class="headerlink" title="clean清除所有"></a>clean清除所有</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">m.clear();</span><br><span class="line">m.size; // 0</span><br></pre></td></tr></table></figure>
<h2 id="size大小"><a href="#size大小" class="headerlink" title="size大小"></a>size大小</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">m.size;</span><br></pre></td></tr></table></figure>
<h2 id="new-Map深拷贝"><a href="#new-Map深拷贝" class="headerlink" title="new Map深拷贝"></a><code>new Map</code>深拷贝</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var m2 = m1; // 浅拷贝</span><br><span class="line">var m3 = new Map(m1); // 深拷贝</span><br></pre></td></tr></table></figure>
<p><strong>深拷贝实例：</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var mm = new Map();</span><br><span class="line">mm.set(&apos;a&apos;,&#123;id:1&#125;);</span><br><span class="line">var mm2 = new Map(mm);</span><br><span class="line">mm2.set(&apos;a&apos;, &#123;id:4&#125;);</span><br><span class="line">console.log(mm2,mm);</span><br></pre></td></tr></table></figure>
<p><strong>结果：</strong></p>
<p><img src="https://wx4.sinaimg.cn/mw690/0069qZtTgy1ghelkmlwaxj30a80340st.jpg" alt="image"></p>
<p>两个value值都是对象，互不影响。</p>
<h2 id="Map所有的值"><a href="#Map所有的值" class="headerlink" title="Map所有的值"></a>Map所有的值</h2><p><strong>方法1：<code>m.values()</code></strong><br><strong>方法2：<code>m.entries()</code></strong></p>
<h3 id="方法1：m-values"><a href="#方法1：m-values" class="headerlink" title="方法1：m.values()"></a>方法1：<code>m.values()</code></h3><p>返回一个迭代器，可以用spread扩展运算符（<code>...</code>）或<code>Array.from()</code>转换成数组。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var m = new Map();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x , &apos;foo&apos;);</span><br><span class="line">m.set(y , &apos;bar&apos;);</span><br><span class="line">console.log(m.values()); // MapIterator &#123;&quot;foo&quot;, &quot;bar&quot;&#125;</span><br><span class="line">console.log([...m.values()]); // [&quot;foo&quot;, &quot;bar&quot;]</span><br><span class="line">console.log(Array.from(m.values())); // [&quot;foo&quot;, &quot;bar&quot;]</span><br></pre></td></tr></table></figure>
<h3 id="方法2：m-entries"><a href="#方法2：m-entries" class="headerlink" title="方法2：m.entries()"></a>方法2：<code>m.entries()</code></h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var m = new Map();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x , &apos;foo&apos;);</span><br><span class="line">m.set(y , &apos;bar&apos;);</span><br><span class="line">console.log(m.entries()); // MapIterator &#123;&#123;…&#125; =&gt; &quot;foo&quot;, &#123;…&#125; =&gt; &quot;bar&quot;&#125;</span><br><span class="line">console.log([...m.entries()]); // [[&#123;id: 1&#125;,&apos;foo&apos;],[&#123;id: 2&#125;,&apos;bar&apos;]]</span><br><span class="line">console.log([...m.entries()][0][1]); // &quot;foo&quot;</span><br><span class="line">console.log([...m.entries()][1][1]); // &quot;bar&quot;</span><br></pre></td></tr></table></figure>
<h2 id="Map所有的键"><a href="#Map所有的键" class="headerlink" title="Map所有的键"></a>Map所有的键</h2><h3 id="keys"><a href="#keys" class="headerlink" title="keys"></a>keys</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var m = new Map();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x , &apos;foo&apos;);</span><br><span class="line">m.set(y , &apos;bar&apos;);</span><br><span class="line">console.log([...m.keys()]); // [&#123;id:1&#125;,&#123;id:2&#125;]</span><br></pre></td></tr></table></figure>
<h3 id="has判断是否有该键"><a href="#has判断是否有该键" class="headerlink" title="has判断是否有该键"></a>has判断是否有该键</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var m = new Map();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x , &apos;foo&apos;);</span><br><span class="line">m.set(y , &apos;bar&apos;);</span><br><span class="line">console.log(m.has(y)); // true</span><br></pre></td></tr></table></figure>
<h2 id="WeakMap"><a href="#WeakMap" class="headerlink" title="WeakMap"></a>WeakMap</h2><p>区别：</p>
<ul>
<li><p>内部内存（特别是GC）的工作方式；</p>
</li>
<li><p>WeakMap只接受对象为键；所以对象被回收项目也会移除</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var m = new WeakMap();</span><br><span class="line">var x = &#123;id:1&#125;, y = &#123;id:2&#125;;</span><br><span class="line">m.set(x ,y);</span><br><span class="line">console.log(m.has(x)); // true</span><br><span class="line">x = null;</span><br><span class="line">console.log(m.has(x)); // false</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="Set"><a href="#Set" class="headerlink" title="Set"></a>Set</h1><p>Set是一个值的集合，其中的值是唯一的。</p>
<p>API:</p>
<p><strong>新建：new Set()</strong><br><strong>增：add()</strong><br><strong>删：delete()</strong><br><strong>查:has</strong></p>
<h2 id="新建"><a href="#新建" class="headerlink" title="新建"></a>新建</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var s = new Set([0,-0,1,2,NaN,2,3,NaN]);</span><br><span class="line">console.log(s); // Set(5) &#123;0, 1, 2, NaN, 3&#125;</span><br></pre></td></tr></table></figure>
<p><code>0</code>和<code>-0</code>被认为是同一个值，<code>NaN</code>与<code>NaN</code>也是相等的。</p>
<h2 id="添加（add）"><a href="#添加（add）" class="headerlink" title="添加（add）"></a>添加（add）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">s.add(7);</span><br><span class="line">console.log(s); // Set(6) &#123;0, 1, 2, NaN, 3, 7&#125;</span><br></pre></td></tr></table></figure>
<h2 id="删除（delete和clear）"><a href="#删除（delete和clear）" class="headerlink" title="删除（delete和clear）"></a>删除（delete和clear）</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">s.delete(2);</span><br><span class="line">console.log(s); // Set(5) &#123;0, 1, NaN, 3, 7&#125;</span><br><span class="line">s.clear();</span><br><span class="line">console.log(s.size); // 0</span><br></pre></td></tr></table></figure>
<h2 id="查询是否存在（has"><a href="#查询是否存在（has" class="headerlink" title="查询是否存在（has)"></a>查询是否存在（has)</h2><p>不像<code>Map</code>里面的<code>get</code>能直接取值，这里是查询是否存在该值。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s.has(1); // true</span><br></pre></td></tr></table></figure>
<h2 id="迭代"><a href="#迭代" class="headerlink" title="迭代"></a>迭代</h2><p>同<code>Map</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">s.keys(); // SetIterator &#123;0, 1, NaN, 3, 7&#125;</span><br><span class="line">s.values(); // SetIterator &#123;0, 1, NaN, 3, 7&#125;</span><br><span class="line">s.entries(); // SetIterator &#123;0 =&gt; 0, 1 =&gt; 1, NaN =&gt; NaN, 3 =&gt; 3, 7 =&gt; 7&#125;</span><br></pre></td></tr></table></figure>
<p>虽然<code>keys()</code>和<code>values()</code>返回的值一样，但它们俩并不相等。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">s.keys() == s.values(); // false</span><br></pre></td></tr></table></figure>
<h2 id="WeakSet"><a href="#WeakSet" class="headerlink" title="WeakSet"></a>WeakSet</h2><p>和Set的区别：</p>
<p><strong>只能存对象</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var ws = new WeakSet([1,2,2,3]); // 无效：Uncaught TypeError: Invalid value used in weak set</span><br></pre></td></tr></table></figure>
<p>WeakSet使用：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var obj1 = &#123;id:1&#125;;</span><br><span class="line">var obj2 = &#123;id:2&#125;;</span><br><span class="line">var ws = new WeakSet();</span><br><span class="line">ws.add(obj1).add(obj2).add(obj1);</span><br><span class="line">console.log(ws); // [&#123;id:1&#125;,&#123;id:2&#125;]</span><br></pre></td></tr></table></figure>
<p>添加了<code>obj1</code>两次，还是去重了。</p>
<h3 id="GC"><a href="#GC" class="headerlink" title="GC"></a>GC</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">obj1 = null;</span><br><span class="line">console.log(ws); // [&#123;id:1&#125;,&#123;id:2&#125;]</span><br><span class="line">ws.has(obj1); // false</span><br></pre></td></tr></table></figure>
<p>虽然obj1的值看上去还在，但已经取不到了。</p>
<h3 id="delete删除-1"><a href="#delete删除-1" class="headerlink" title="delete删除"></a>delete删除</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">ws.delete(obj2);</span><br><span class="line">console.log(ws); // [&#123;id:1&#125;]</span><br></pre></td></tr></table></figure>
<hr>
<h1 id="Array、Map、WeakMap、Set、WeakSet的对比"><a href="#Array、Map、WeakMap、Set、WeakSet的对比" class="headerlink" title="Array、Map、WeakMap、Set、WeakSet的对比"></a>Array、Map、WeakMap、Set、WeakSet的对比</h1><h2 id="对比表-1"><a href="#对比表-1" class="headerlink" title="对比表"></a>对比表</h2><table>
<thead>
<tr>
<th style="text-align:center">功能属性</th>
<th style="text-align:center">Array</th>
<th style="text-align:center">Map</th>
<th style="text-align:center">WeakMap</th>
<th style="text-align:center">Set</th>
<th style="text-align:center">WeakSet</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">新建</td>
<td style="text-align:center"><code>[]</code></td>
<td style="text-align:center"><code>new Map()</code></td>
<td style="text-align:center"><code>new WeakMap()</code></td>
<td style="text-align:center"><code>new Set()</code></td>
<td style="text-align:center"><code>new WeakSet()</code></td>
</tr>
<tr>
<td style="text-align:center">增</td>
<td style="text-align:center"><code>push</code></td>
<td style="text-align:center"><code>m.set(obj,&#39;value&#39;)</code></td>
<td style="text-align:center"><code>wm.set(obj1,&#39;value&#39;)</code></td>
<td style="text-align:center"><code>s.add(value)</code></td>
<td style="text-align:center"><code>ws.add(obj)</code></td>
</tr>
<tr>
<td style="text-align:center">新建并增加</td>
<td style="text-align:center"><code>[1,2]</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
<td style="text-align:center"><code>new Set([4, 0, 0, 4, 1])</code></td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">键</td>
<td style="text-align:center">对象或其它</td>
<td style="text-align:center">对象或其它</td>
<td style="text-align:center">只接受对象</td>
<td style="text-align:center">对象或其它</td>
<td style="text-align:center">只接受对象</td>
</tr>
<tr>
<td style="text-align:center">删</td>
<td style="text-align:center"><code>slice</code>或<code>splice</code></td>
<td style="text-align:center"><code>delete</code></td>
<td style="text-align:center"><code>delete</code></td>
<td style="text-align:center"><code>delete</code></td>
<td style="text-align:center"><code>delete</code></td>
</tr>
<tr>
<td style="text-align:center">清除</td>
<td style="text-align:center"><code>arr = []</code></td>
<td style="text-align:center"><code>clear</code></td>
<td style="text-align:center"><code>clear</code></td>
<td style="text-align:center"><code>clear</code></td>
<td style="text-align:center"><code>clear</code></td>
</tr>
<tr>
<td style="text-align:center">改</td>
<td style="text-align:center"><code>splice</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">查</td>
<td style="text-align:center"><code>includes</code>、<code>indexOf</code>等</td>
<td style="text-align:center"><code>get</code>或<code>has</code></td>
<td style="text-align:center"><code>get</code>或<code>has</code></td>
<td style="text-align:center"><code>has</code></td>
<td style="text-align:center"><code>has</code></td>
</tr>
<tr>
<td style="text-align:center">键</td>
<td style="text-align:center"><code>m.keys()</code>下标</td>
<td style="text-align:center"><code>m.keys()</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center"><code>m.keys()</code></td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">值</td>
<td style="text-align:center"><code>m.values()</code>值</td>
<td style="text-align:center"><code>m.values()</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center"><code>m.values()</code></td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">迭代</td>
<td style="text-align:center"><code>entries</code></td>
<td style="text-align:center"><code>entries</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center"><code>entries</code></td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td style="text-align:center">长度</td>
<td style="text-align:center"><code>length</code></td>
<td style="text-align:center"><code>size</code></td>
<td style="text-align:center">-</td>
<td style="text-align:center"><code>size</code></td>
<td style="text-align:center">-</td>
</tr>
</tbody>
</table>
<h2 id="Map-API"><a href="#Map-API" class="headerlink" title="Map API:"></a>Map API:</h2><ul>
<li>size数量</li>
<li>set()设置</li>
<li>clear()清除</li>
<li>delete()删除</li>
<li>has()存在</li>
<li>get()获取</li>
<li>keys()键</li>
<li>values()值</li>
<li>entries()迭代</li>
</ul>
<h2 id="WeakMap-API"><a href="#WeakMap-API" class="headerlink" title="WeakMap API:"></a>WeakMap API:</h2><ul>
<li>set()设置</li>
<li>delete()删除</li>
<li>has()存在</li>
<li>get()获取</li>
<li>clear()清除（已弃用，但可通过new WeakMap()空对象来置空）</li>
</ul>
<h2 id="Set-API"><a href="#Set-API" class="headerlink" title="Set API:"></a>Set API:</h2><ul>
<li>size数量</li>
<li>add()添加</li>
<li>clear()清除</li>
<li>delete()删除</li>
<li>has()存在</li>
<li>keys()键</li>
<li>values()值</li>
<li>entries()迭代</li>
</ul>
<h2 id="WeakSet-API："><a href="#WeakSet-API：" class="headerlink" title="WeakSet API："></a>WeakSet API：</h2><ul>
<li>add()添加</li>
<li>delete()删除</li>
<li>has()存在</li>
</ul>
<h1 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">function observerProxy(obj)&#123;</span><br><span class="line">    let handler = &#123;</span><br><span class="line">		get(target,key,receiver)&#123;</span><br><span class="line">			console.log(&apos;获取&apos;+key);</span><br><span class="line">			if(typeof target[key] === &apos;object&apos; &amp;&amp; target[key] !== null) &#123;</span><br><span class="line">				return new Proxy(target[key],handler);</span><br><span class="line">			&#125;</span><br><span class="line">			return Reflect.get(target,key,receiver);</span><br><span class="line">		&#125;,</span><br><span class="line">        set(target,key,value,reciver)&#123;</span><br><span class="line">			console.log(target,key,value,reciver)</span><br><span class="line">			return Reflect.set(target,key,value,reciver);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    return new Proxy(obj,handler)</span><br><span class="line">&#125;</span><br><span class="line">var obj2 = &#123;</span><br><span class="line">    name: &apos;小明&apos;,</span><br><span class="line">    flag: &#123;</span><br><span class="line">        book: &#123;</span><br><span class="line">            name : &apos;js&apos;,</span><br><span class="line">            page: 325</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">var objTest = observerProxy(obj2)</span><br><span class="line">objTest.flag.book.page = 33</span><br></pre></td></tr></table></figure>
<h1 id="Reflect"><a href="#Reflect" class="headerlink" title="Reflect"></a>Reflect</h1><h2 id="修改Object的返回结果"><a href="#修改Object的返回结果" class="headerlink" title="修改Object的返回结果"></a>修改Object的返回结果</h2><p><code>Object.defineProperty(obj, name, desc)</code>在无法定义属性时，会抛出一个错误，而<code>Reflect.defineProperty(obj, name, desc)</code>则会返回<code>false</code>。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 老写法</span><br><span class="line">try &#123;</span><br><span class="line">  Object.defineProperty(target, property, attributes);</span><br><span class="line">  // success</span><br><span class="line">&#125; catch (e) &#123;</span><br><span class="line">  // failure</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// 新写法</span><br><span class="line">if (Reflect.defineProperty(target, property, attributes)) &#123;</span><br><span class="line">  // success</span><br><span class="line">&#125; else &#123;</span><br><span class="line">  // failure</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="命令式编程变成函数式编程"><a href="#命令式编程变成函数式编程" class="headerlink" title="命令式编程变成函数式编程"></a>命令式编程变成函数式编程</h2><p>原来的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&apos;name&apos; in obj;</span><br></pre></td></tr></table></figure>
<p>现在的：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Reflect.has(obj, &apos;name&apos;);</span><br></pre></td></tr></table></figure>
<h2 id="与Proxy语法一一对应"><a href="#与Proxy语法一一对应" class="headerlink" title="与Proxy语法一一对应"></a>与Proxy语法一一对应</h2><h1 id="Promise"><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h1><p><code>promise</code>代替<code>callback</code>回调。</p>
<h2 id="promise-all"><a href="#promise-all" class="headerlink" title="promise.all"></a>promise.all</h2><p><strong>只能同时调用不受关联的prmise，如果promise2的值受promise1影响，不能用promise.all，可以用async/await</strong></p>
<p>首先假设要依次调用3个<code>promise</code>的代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">var pro1 = new Promise((resolve,reject) =&gt; &#123;</span><br><span class="line">    console.log(1);</span><br><span class="line">    resolve(&apos;hello&apos;)</span><br><span class="line">&#125;)</span><br><span class="line">var pro2 = new Promise((resolve,reject) =&gt; &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">    setTimeout(()=&gt;&#123;</span><br><span class="line">        resolve(&apos;world&apos;)</span><br><span class="line">    &#125;,1000);</span><br><span class="line">&#125;)</span><br><span class="line">var pro3 = new Promise((resolve,reject) =&gt; &#123;</span><br><span class="line">    console.log(3);</span><br><span class="line">    setTimeout(()=&gt;&#123;</span><br><span class="line">        resolve(&apos;pdd&apos;)</span><br><span class="line">    &#125;,2000);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>如果不用<code>promise.all</code>来调用的话：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">pro1.then((res1)=&gt;&#123;</span><br><span class="line">&#125;);</span><br><span class="line">pro2.then((res2)=&gt;&#123;</span><br><span class="line">&#125;)</span><br><span class="line">pro3.then((res3)=&gt;&#123;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>只有不停的用<code>.then</code>才能保证每一步都正确，此时使用<code>promise.all</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Promise.all([pro1,pro2,pro3]).then(val=&gt;&#123;</span><br><span class="line">    console.log(val);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="promise-race"><a href="#promise-race" class="headerlink" title="promise.race"></a>promise.race</h2><p>第一个抛出<code>resolve</code>的<code>promise</code>就是<code>Promise.race</code>获取的值。</p>
<p>这种模式称为门闩模式、promise中称中竞态。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var pro2 = new Promise((resolve,reject) =&gt; &#123;</span><br><span class="line">    console.log(2);</span><br><span class="line">    setTimeout(()=&gt;&#123;</span><br><span class="line">        resolve(&apos;world&apos;)</span><br><span class="line">    &#125;,1000);</span><br><span class="line">&#125;)</span><br><span class="line">var pro3 = new Promise((resolve,reject) =&gt; &#123;</span><br><span class="line">    console.log(3);</span><br><span class="line">    setTimeout(()=&gt;&#123;</span><br><span class="line">        resolve(&apos;pdd&apos;)</span><br><span class="line">    &#125;,2000);</span><br><span class="line">&#125;)</span><br><span class="line">Promise.race([pro2,pro3]).then(val=&gt;&#123;</span><br><span class="line">    console.log(val);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>此时，pro2要花费1秒，pro3要花费2秒，谁先<code>resolve</code>，<code>.then</code>获取的<code>val</code>就是谁的。</p>
<h1 id="Iterater和for…of循环"><a href="#Iterater和for…of循环" class="headerlink" title="Iterater和for…of循环"></a>Iterater和for…of循环</h1><h2 id="Iterator"><a href="#Iterator" class="headerlink" title="Iterator"></a>Iterator</h2><p>可遍历的类数组：</p>
<p><code>nodeList</code>、<code>Map</code>、<code>Set</code>、<code>Array</code>、<code>String</code>、<code>arguments</code>。</p>
<p>都可以用<code>Array.from</code>和扩展运算符（<code>...</code>）转换为真正的数组。</p>
<p>都可以用<code>for...of</code>遍历值。</p>
<h2 id="for…of"><a href="#for…of" class="headerlink" title="for…of"></a>for…of</h2><p><code>for...of</code>的使用范围是所有部署了<code>Iterator</code>的对象。</p>
<h3 id="使用-3"><a href="#使用-3" class="headerlink" title="使用"></a>使用</h3><h4 id="数组-1"><a href="#数组-1" class="headerlink" title="数组"></a>数组</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 数组</span><br><span class="line">let arr = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;];</span><br><span class="line">for (let pair of arr) &#123;</span><br><span class="line">  console.log(pair);</span><br><span class="line">&#125;</span><br><span class="line">for (let pair of arr.entries()) &#123;</span><br><span class="line">  console.log(pair);</span><br><span class="line">&#125;</span><br><span class="line">for (let pair of arr.keys()) &#123;</span><br><span class="line">  console.log(pair);</span><br><span class="line">&#125;</span><br><span class="line">for (let pair of arr.values()) &#123;</span><br><span class="line">  console.log(pair);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="字符串-1"><a href="#字符串-1" class="headerlink" title="字符串"></a>字符串</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let str = &quot;hello&quot;;</span><br><span class="line"></span><br><span class="line">for (let s of str) &#123;</span><br><span class="line">  console.log(s); // h e l l o</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="DOM-NodeList对象"><a href="#DOM-NodeList对象" class="headerlink" title="DOM NodeList对象"></a>DOM NodeList对象</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">let paras = document.querySelectorAll(&quot;p&quot;);</span><br><span class="line"></span><br><span class="line">for (let p of paras) &#123;</span><br><span class="line">  p.classList.add(&quot;test&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="arguments对象"><a href="#arguments对象" class="headerlink" title="arguments对象"></a>arguments对象</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function printArgs() &#123;</span><br><span class="line">  for (let x of arguments) &#123;</span><br><span class="line">    console.log(x);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">printArgs(&apos;a&apos;, &apos;b&apos;);</span><br><span class="line">// &apos;a&apos;</span><br><span class="line">// &apos;b&apos;</span><br></pre></td></tr></table></figure>
<h3 id="对象-2"><a href="#对象-2" class="headerlink" title="对象"></a>对象</h3><p>遍历对象可以减少使用<code>Object.keys()</code>这一步骤。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">let es6 = &#123;</span><br><span class="line">  edition: 6,</span><br><span class="line">  committee: &quot;TC39&quot;,</span><br><span class="line">  standard: &quot;ECMA-262&quot;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">for (let e in es6) &#123;</span><br><span class="line">  console.log(e);</span><br><span class="line">&#125;</span><br><span class="line">// edition</span><br><span class="line">// committee</span><br><span class="line">// standard</span><br></pre></td></tr></table></figure>
<p><strong>用<code>for...in</code>遍历对象时会报错</strong></p>
<h3 id="对比"><a href="#对比" class="headerlink" title="对比"></a>对比</h3><p><code>for</code>的缺陷</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 取值比较麻烦</span><br><span class="line">for (var index = 0; index &lt; myArray.length; index++) &#123;</span><br><span class="line">  console.log(myArray[index]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>为了解决for麻烦的问题，引入的forEach</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 问题：无法跳出循环</span><br><span class="line">myArray.forEach(function (value) &#123;</span><br><span class="line">  break;</span><br><span class="line">  console.log(value);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><code>for...in</code>的缺陷：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1. 会遍历所有可枚举的属性，包括原型链（是否可遍历只和该对象上的属性enumerable有关，和在哪里无关）</span><br><span class="line">2. 除了数组中的元素，会遍历数组的私有属性</span><br><span class="line">3. 专门为对象设计</span><br></pre></td></tr></table></figure>
<h3 id="对比表-2"><a href="#对比表-2" class="headerlink" title="对比表"></a>对比表</h3><table>
<thead>
<tr>
<th style="text-align:center">功能</th>
<th style="text-align:center"><code>for</code></th>
<th style="text-align:center"><code>forEach</code></th>
<th style="text-align:center"><code>for...in</code></th>
<th style="text-align:center"><code>for...of</code></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">跳出循环</td>
<td style="text-align:center">×</td>
<td style="text-align:center"><code>try...catch</code>和<code>throw</code></td>
<td style="text-align:center"><code>return</code> 或 <code>break</code></td>
<td style="text-align:center"><code>return</code> 或 <code>break</code></td>
</tr>
<tr>
<td style="text-align:center">遍历数组时的<code>value</code></td>
<td style="text-align:center">下标</td>
<td style="text-align:center">下标</td>
<td style="text-align:center">下标</td>
<td style="text-align:center">值</td>
</tr>
<tr>
<td style="text-align:center">遍历对象时的<code>value</code></td>
<td style="text-align:center"><code>TypeError</code></td>
<td style="text-align:center"><code>TypeError</code></td>
<td style="text-align:center">key</td>
<td style="text-align:center"><code>TypeError</code></td>
</tr>
</tbody>
</table>
<p>总结：</p>
<p><code>for...of</code>可以<code>bread</code>，遍历时是值；<br><code>for...in</code>遍历对象更优，可简写<code>Objec.keys()</code>;</p>
<h1 id="Generator"><a href="#Generator" class="headerlink" title="Generator"></a>Generator</h1><h1 id="async-await"><a href="#async-await" class="headerlink" title="async/await"></a>async/await</h1><p><a href="https://segmentfault.com/a/1190000007535316" target="_blank" rel="noopener">学习链接</a></p>
<h2 id="普通函数和async的区别"><a href="#普通函数和async的区别" class="headerlink" title="普通函数和async的区别"></a>普通函数和async的区别</h2><p>普通函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function testAsync()&#123;</span><br><span class="line">    return &apos;hello world&apos;</span><br><span class="line">&#125;</span><br><span class="line">testAsync(); // &apos;hello world&apos;</span><br></pre></td></tr></table></figure>
<p><code>async</code>函数：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">async function testAsync()&#123;</span><br><span class="line">    return &apos;hello world&apos;</span><br><span class="line">&#125;</span><br><span class="line">testAsync(); // Promise &#123;&lt;fulfilled&gt;: &quot;hello world&quot;&#125;</span><br></pre></td></tr></table></figure>
<p><code>async</code>返回的是一个<code>promise</code>对象</p>
<h2 id="await"><a href="#await" class="headerlink" title="await"></a>await</h2><p>如果不用async/await：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">async function testAsync()&#123;</span><br><span class="line">    return new Promise(resolve =&gt; &#123;</span><br><span class="line">        setTimeout(()=&gt;resolve(&apos;long_time_value&apos;), 1000);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">testAsync().then(v=&gt;&#123;</span><br><span class="line">    console.log(&apos;get&apos;,v);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>1秒后：get long_time_value</p>
<p>如果用的话：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function testAsync()&#123;</span><br><span class="line">    return new Promise(resolve =&gt; &#123;</span><br><span class="line">        setTimeout(()=&gt;resolve(&apos;long_time_value&apos;), 1000);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">async function test()&#123;</span><br><span class="line">    const v = await testAsync();</span><br><span class="line">    console.log(v);</span><br><span class="line">&#125;</span><br><span class="line">test();</span><br></pre></td></tr></table></figure>
<p>1秒后：get long_time_value</p>
<h3 id="优势：处理then链"><a href="#优势：处理then链" class="headerlink" title="优势：处理then链"></a>优势：处理then链</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">function takeLongTime(n)&#123;</span><br><span class="line">    return new Promise(resolve =&gt; &#123;</span><br><span class="line">        setTimeout(()=&gt; resolve(n+200), n);</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function step1(n) &#123;</span><br><span class="line">    console.log(`step1 with $&#123;n&#125;`);</span><br><span class="line">    return takeLongTime(n);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function step2(n) &#123;</span><br><span class="line">    console.log(`step2 with $&#123;n&#125;`);</span><br><span class="line">    return takeLongTime(n);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function step3(n) &#123;</span><br><span class="line">    console.log(`step3 with $&#123;n&#125;`);</span><br><span class="line">    return takeLongTime(n);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function doIt()&#123;</span><br><span class="line">    console.time(&quot;doIt&quot;);</span><br><span class="line">    const time1 = 3000;</span><br><span class="line">    step1(time1)</span><br><span class="line">        .then(time2 =&gt; step2(time2))</span><br><span class="line">        .then(time3 =&gt; step3(time3))</span><br><span class="line">        .then(result =&gt; &#123;</span><br><span class="line">            console.log(`result is $&#123;result&#125;`);</span><br><span class="line">            console.timeEnd(&quot;doIt&quot;);</span><br><span class="line">        &#125;);</span><br><span class="line">&#125;</span><br><span class="line">doIt();</span><br><span class="line"></span><br><span class="line">step1 with 3000</span><br><span class="line">VM5329:13 step2 with 3200</span><br><span class="line">VM5329:18 step3 with 3400</span><br><span class="line">VM5329:29 result is 3600</span><br><span class="line">VM5329:30 doIt: 9606.429931640625ms</span><br></pre></td></tr></table></figure>
<p>每一个promise都受上一个promise影响，所以必须一个调完之后再调另外一个。</p>
<p>再看看用async/await更改doIt方法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">async function doIt()&#123;</span><br><span class="line">    console.time(&quot;doIt&quot;);</span><br><span class="line">    const time1 = 3000;</span><br><span class="line">    const time2 = await step1(time1);</span><br><span class="line">    const time3 = await step2(time2);</span><br><span class="line">    const result = await step3(time3);</span><br><span class="line">    console.log(`result is $&#123;result&#125;`);</span><br><span class="line">    console.timeEnd(&quot;doIt&quot;);</span><br><span class="line">&#125;</span><br><span class="line">doIt();</span><br></pre></td></tr></table></figure>
<p>结果和上一个不停用<code>then</code>链的一样，但是代码要清晰得多，而且没有回调地狱。</p>
<h1 id="Class"><a href="#Class" class="headerlink" title="Class"></a>Class</h1><h1 id="export-和-import-和-require"><a href="#export-和-import-和-require" class="headerlink" title="export 和 import 和 require"></a>export 和 import 和 require</h1><h2 id="普通使用"><a href="#普通使用" class="headerlink" title="普通使用"></a>普通使用</h2><p>constant.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var constant = &#123;</span><br><span class="line">    edit:&quot;编辑&quot;,</span><br><span class="line">    test:&apos;2&apos;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var b = &#123;&#125;;</span><br><span class="line"></span><br><span class="line">export &#123;</span><br><span class="line">    constant,</span><br><span class="line">    b</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></p>
<p>test.vue<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import &#123;constant,b&#125; from &apos;@/utils/test&apos;;</span><br><span class="line">console.log(constant,b)</span><br></pre></td></tr></table></figure></p>
<h2 id="全局使用"><a href="#全局使用" class="headerlink" title="全局使用"></a>全局使用</h2><p>constant.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">    list1:[],</span><br><span class="line">    list2:[],</span><br><span class="line">    b:function()&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>main.js<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">improt constant from &apos;./utils/test&apos;;</span><br><span class="line">Vue.prototype.$constant = constant;</span><br></pre></td></tr></table></figure></p>
<p>test.vue<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">this.list = this.$constant.list1;</span><br></pre></td></tr></table></figure></p>
<h2 id="export和export-default的区别"><a href="#export和export-default的区别" class="headerlink" title="export和export default的区别"></a><code>export</code>和<code>export default</code>的区别</h2><ul>
<li><code>export</code>需要导出多个并需要<code>{}</code>，<code>export default</code>只需要一个<code>{}</code>导出全部（没有额外<code>{}</code>）；</li>
<li><code>import</code>时，<code>export</code>需要导入多个，<code>export default</code>是默认的，只需要给一个名字；</li>
</ul>
<h2 id="require"><a href="#require" class="headerlink" title="require"></a>require</h2><p><code>require</code>是<code>AMD</code>规范；<code>import</code>是<code>ES6</code>规范。</p>
<p><code>require</code>是赋值，<code>import</code>是解构。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">defaultImg2: require(&quot;../../../assets/img/default.png&quot;),</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/08/05/JavaScript之Object对象/" rel="next" title="JavaScript之Object对象">
                <i class="fa fa-chevron-left"></i> JavaScript之Object对象
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/08/26/《绝望的主妇》9月英语学习/" rel="prev" title="《绝望的主妇》9月英语学习">
                《绝望的主妇》9月英语学习 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#let、const和globalThis"><span class="nav-number">1.</span> <span class="nav-text">let、const和globalThis</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#let"><span class="nav-number">1.1.</span> <span class="nav-text">let</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#不存在变量提升"><span class="nav-number">1.1.1.</span> <span class="nav-text">不存在变量提升</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#暂时性死区"><span class="nav-number">1.1.2.</span> <span class="nav-text">暂时性死区</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#不允许重复声明"><span class="nav-number">1.1.3.</span> <span class="nav-text">不允许重复声明</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#块级作用域替代IIFE立即执行函数"><span class="nav-number">1.1.4.</span> <span class="nav-text">块级作用域替代IIFE立即执行函数</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#const"><span class="nav-number">1.2.</span> <span class="nav-text">const</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#globalThis"><span class="nav-number">1.3.</span> <span class="nav-text">globalThis</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常量变量"><span class="nav-number">1.4.</span> <span class="nav-text">常量变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常量对象"><span class="nav-number">1.5.</span> <span class="nav-text">常量对象</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#变量的解构赋值"><span class="nav-number">2.</span> <span class="nav-text">变量的解构赋值</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#数组"><span class="nav-number">2.1.</span> <span class="nav-text">数组</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#用法"><span class="nav-number">2.1.1.</span> <span class="nav-text">用法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#默认值"><span class="nav-number">2.1.2.</span> <span class="nav-text">默认值</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#ES6…扩展（spread）-收集（rest）运算符详解"><span class="nav-number">3.</span> <span class="nav-text">ES6…扩展（spread）/收集（rest）运算符详解</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#一、扩展运算符"><span class="nav-number">3.1.</span> <span class="nav-text">一、扩展运算符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-代替apply"><span class="nav-number">3.1.1.</span> <span class="nav-text">1.代替apply</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-代替concat"><span class="nav-number">3.1.2.</span> <span class="nav-text">2.代替concat</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-代替split"><span class="nav-number">3.1.3.</span> <span class="nav-text">3.代替split</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、收集运算符"><span class="nav-number">3.2.</span> <span class="nav-text">二、收集运算符</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-接收不确定个数的形参"><span class="nav-number">3.2.1.</span> <span class="nav-text">1.接收不确定个数的形参</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-配合解构时使用"><span class="nav-number">3.2.2.</span> <span class="nav-text">2.配合解构时使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对象"><span class="nav-number">3.3.</span> <span class="nav-text">对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用"><span class="nav-number">3.3.1.</span> <span class="nav-text">使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#默认值-1"><span class="nav-number">3.3.2.</span> <span class="nav-text">默认值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#注意点"><span class="nav-number">3.3.3.</span> <span class="nav-text">注意点</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串"><span class="nav-number">3.4.</span> <span class="nav-text">字符串</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数值和布尔值"><span class="nav-number">3.5.</span> <span class="nav-text">数值和布尔值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#用途"><span class="nav-number">3.6.</span> <span class="nav-text">用途</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#对比表"><span class="nav-number">3.7.</span> <span class="nav-text">对比表</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#字符串的扩展"><span class="nav-number">4.</span> <span class="nav-text">字符串的扩展</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#数值的扩展"><span class="nav-number">5.</span> <span class="nav-text">数值的扩展</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#函数的扩展"><span class="nav-number">6.</span> <span class="nav-text">函数的扩展</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#函数的默认参数"><span class="nav-number">6.1.</span> <span class="nav-text">函数的默认参数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#与解构赋值默认值结合使用"><span class="nav-number">6.1.1.</span> <span class="nav-text">与解构赋值默认值结合使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#位置"><span class="nav-number">6.1.2.</span> <span class="nav-text">位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域"><span class="nav-number">6.1.3.</span> <span class="nav-text">作用域</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#应用"><span class="nav-number">6.1.4.</span> <span class="nav-text">应用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#reset参数"><span class="nav-number">6.2.</span> <span class="nav-text">reset参数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-1"><span class="nav-number">6.2.1.</span> <span class="nav-text">使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#位置-1"><span class="nav-number">6.2.2.</span> <span class="nav-text">位置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#箭头函数"><span class="nav-number">6.3.</span> <span class="nav-text">箭头函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-2"><span class="nav-number">6.3.1.</span> <span class="nav-text">使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#与箭头函数结合"><span class="nav-number">6.3.2.</span> <span class="nav-text">与箭头函数结合</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#尾调用优化"><span class="nav-number">6.4.</span> <span class="nav-text">尾调用优化</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#尾调用是什么"><span class="nav-number">6.4.1.</span> <span class="nav-text">尾调用是什么</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#尾调用优化-1"><span class="nav-number">6.4.2.</span> <span class="nav-text">尾调用优化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#尾递归"><span class="nav-number">6.4.3.</span> <span class="nav-text">尾递归</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#递归函数的改写"><span class="nav-number">6.4.4.</span> <span class="nav-text">递归函数的改写</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#数组的扩展"><span class="nav-number">7.</span> <span class="nav-text">数组的扩展</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#对象-1"><span class="nav-number">8.</span> <span class="nav-text">对象</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Symbol"><span class="nav-number">9.</span> <span class="nav-text">Symbol</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Map"><span class="nav-number">10.</span> <span class="nav-text">Map</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#使用Map以非字符串为键"><span class="nav-number">10.1.</span> <span class="nav-text">使用Map以非字符串为键</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#delete删除"><span class="nav-number">10.2.</span> <span class="nav-text">delete删除</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#clean清除所有"><span class="nav-number">10.3.</span> <span class="nav-text">clean清除所有</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#size大小"><span class="nav-number">10.4.</span> <span class="nav-text">size大小</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#new-Map深拷贝"><span class="nav-number">10.5.</span> <span class="nav-text">new Map深拷贝</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Map所有的值"><span class="nav-number">10.6.</span> <span class="nav-text">Map所有的值</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#方法1：m-values"><span class="nav-number">10.6.1.</span> <span class="nav-text">方法1：m.values()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法2：m-entries"><span class="nav-number">10.6.2.</span> <span class="nav-text">方法2：m.entries()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Map所有的键"><span class="nav-number">10.7.</span> <span class="nav-text">Map所有的键</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#keys"><span class="nav-number">10.7.1.</span> <span class="nav-text">keys</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#has判断是否有该键"><span class="nav-number">10.7.2.</span> <span class="nav-text">has判断是否有该键</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WeakMap"><span class="nav-number">10.8.</span> <span class="nav-text">WeakMap</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Set"><span class="nav-number">11.</span> <span class="nav-text">Set</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#新建"><span class="nav-number">11.1.</span> <span class="nav-text">新建</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#添加（add）"><span class="nav-number">11.2.</span> <span class="nav-text">添加（add）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#删除（delete和clear）"><span class="nav-number">11.3.</span> <span class="nav-text">删除（delete和clear）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#查询是否存在（has"><span class="nav-number">11.4.</span> <span class="nav-text">查询是否存在（has)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#迭代"><span class="nav-number">11.5.</span> <span class="nav-text">迭代</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WeakSet"><span class="nav-number">11.6.</span> <span class="nav-text">WeakSet</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#GC"><span class="nav-number">11.6.1.</span> <span class="nav-text">GC</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#delete删除-1"><span class="nav-number">11.6.2.</span> <span class="nav-text">delete删除</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Array、Map、WeakMap、Set、WeakSet的对比"><span class="nav-number">12.</span> <span class="nav-text">Array、Map、WeakMap、Set、WeakSet的对比</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#对比表-1"><span class="nav-number">12.1.</span> <span class="nav-text">对比表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Map-API"><span class="nav-number">12.2.</span> <span class="nav-text">Map API:</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WeakMap-API"><span class="nav-number">12.3.</span> <span class="nav-text">WeakMap API:</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Set-API"><span class="nav-number">12.4.</span> <span class="nav-text">Set API:</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#WeakSet-API："><span class="nav-number">12.5.</span> <span class="nav-text">WeakSet API：</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Proxy"><span class="nav-number">13.</span> <span class="nav-text">Proxy</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Reflect"><span class="nav-number">14.</span> <span class="nav-text">Reflect</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#修改Object的返回结果"><span class="nav-number">14.1.</span> <span class="nav-text">修改Object的返回结果</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#命令式编程变成函数式编程"><span class="nav-number">14.2.</span> <span class="nav-text">命令式编程变成函数式编程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#与Proxy语法一一对应"><span class="nav-number">14.3.</span> <span class="nav-text">与Proxy语法一一对应</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Promise"><span class="nav-number">15.</span> <span class="nav-text">Promise</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#promise-all"><span class="nav-number">15.1.</span> <span class="nav-text">promise.all</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#promise-race"><span class="nav-number">15.2.</span> <span class="nav-text">promise.race</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Iterater和for…of循环"><span class="nav-number">16.</span> <span class="nav-text">Iterater和for…of循环</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Iterator"><span class="nav-number">16.1.</span> <span class="nav-text">Iterator</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#for…of"><span class="nav-number">16.2.</span> <span class="nav-text">for…of</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-3"><span class="nav-number">16.2.1.</span> <span class="nav-text">使用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#数组-1"><span class="nav-number">16.2.1.1.</span> <span class="nav-text">数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#字符串-1"><span class="nav-number">16.2.1.2.</span> <span class="nav-text">字符串</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#DOM-NodeList对象"><span class="nav-number">16.2.1.3.</span> <span class="nav-text">DOM NodeList对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#arguments对象"><span class="nav-number">16.2.1.4.</span> <span class="nav-text">arguments对象</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对象-2"><span class="nav-number">16.2.2.</span> <span class="nav-text">对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对比"><span class="nav-number">16.2.3.</span> <span class="nav-text">对比</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对比表-2"><span class="nav-number">16.2.4.</span> <span class="nav-text">对比表</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Generator"><span class="nav-number">17.</span> <span class="nav-text">Generator</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#async-await"><span class="nav-number">18.</span> <span class="nav-text">async/await</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#普通函数和async的区别"><span class="nav-number">18.1.</span> <span class="nav-text">普通函数和async的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#await"><span class="nav-number">18.2.</span> <span class="nav-text">await</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#优势：处理then链"><span class="nav-number">18.2.1.</span> <span class="nav-text">优势：处理then链</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#Class"><span class="nav-number">19.</span> <span class="nav-text">Class</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#export-和-import-和-require"><span class="nav-number">20.</span> <span class="nav-text">export 和 import 和 require</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#普通使用"><span class="nav-number">20.1.</span> <span class="nav-text">普通使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#全局使用"><span class="nav-number">20.2.</span> <span class="nav-text">全局使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#export和export-default的区别"><span class="nav-number">20.3.</span> <span class="nav-text">export和export default的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#require"><span class="nav-number">20.4.</span> <span class="nav-text">require</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
